<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>指令练习</title>
    <style>
    .content{
        width: 200px;
        /* 不折行 */
        white-space: nowrap;
        /* 超出隐藏 */
        overflow: hidden;
        /* 超车文本部分显示省略号 */
        text-overflow: ellipsis;
    }
    
    
    </style>
</head>
<body>
    <div id="app">
        {{message}}<br>
        <!-- 渲染html文本 -->
      <span v-html="html"></span><br>

      <!-- 渲染纯文本 -->
      <span v-text="html">安徽度假村</span> 

      <!-- 动态绑定属性，可简写‘：’ -->
      <div class="content" v-bind:title="content">{{content}}</div>
      <div class="content" :title="content">{{content}}</div>

      <!-- 绑定事件 ，可简写为‘@’-->
      <div>
          <button v-on:click="handleClick">按钮</button>
      </div>
      <div>
          <button @click="handleClick">按钮</button>
      </div>
     
    <!-- 列表渲染，可用于循环遍历数组的每个元素或对象的每个属性 -->
    <ul>
        <!-- hobbies 数组属性名 ; hobby 数组中的每一项; index 数组每一项的索引 -->
        <li v-for="(hobby,index) in hobbies">{{index}}--{{hobby}}</li>
    </ul>
    <ul>
        <!-- address 对象属性名 ; value 对象中的每一项属性值; key 对象中的每一项属性名 ; index 对象每一项的索引 -->
        <li v-for="(value ,key, index) of address">{{index}}--{{key}}--{{value}}</li>
    </ul>
    <ul>
        <!--i 每一项 ; 10 表示具体循环遍历10次 -->
        <li v-for="i in 10">{{i}}</li>
    </ul>

    </div>

    <!-- 引入vue.js文件 -->
    <script src="./lib/vue.js"></script>
    <script>
        // 声明式渲染
       const vm = new Vue({
           el:'#app',
           data:{
               message:'加油鸭',
               html:'<input placeholder="请输入文本"/>',
               content:'房子大量电话小了，假期多了，田埂那，谁更那好越来越好',
               hobbies:['吃饭','睡觉','打豆豆','十面埋伏'],
               address:{
                   province:'四川',
                   city:'成都',
                   district:'武侯'
               }
           },
           methods:{
               handleClick(){
                   console.log('点我啊。。。。')
               } 
              
           }
       })
    
    
    
    
    </script>
</body>
</html>